<template>
<div class="app-container">
  <el-form :inline="true" :model="formData" class="demo-form-inline" >
  <el-form-item label="客户名称"><el-input placeholder="请输入客户名称" v-model="formData.customerName"></el-input></el-form-item>
    <el-form-item label="项目地址"><el-input placeholder="请输入项目地址" v-model="formData.projectAddress"></el-input></el-form-item>
    <el-form-item label="客户电话"><el-input placeholder="请输入客户电话" v-model="formData.customerTelephone"></el-input></el-form-item>

    <el-form-item>
      <el-button type="primary" @click="Search">查询</el-button>
      <el-button @click="Reset" >重置</el-button>
    </el-form-item>
  </el-form>
  <el-button   v-hasPermi="['module:filing:add']" type="success" style="margin-bottom:10px" size="mini" icon="el-icon-plus" @click="openFn">添加</el-button>
  <el-card>
    <el-table
      :data="list"
      border
      style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="120">
      </el-table-column>
      <el-table-column prop="customerName" align="center" label="客户名称" width="180">
      </el-table-column>
      <el-table-column prop="customerTelephone" align="center" label="客户电话" width="180">
      </el-table-column>
      <el-table-column prop="projectName" align="center" label="项目名称"></el-table-column>
      <el-table-column prop="projectAddress" align="center" label="项目地址"></el-table-column>
      <el-table-column prop="corporateName" align="center" label="公司名称"></el-table-column>
      <el-table-column prop="salesmanName" align="center" label="业务员名称"></el-table-column>
      <el-table-column prop="productName" align="center" label="产品名称">
      </el-table-column>
      <el-table-column prop="status" align="center" label="客户状态">
       <template slot-scope="scope">
         <el-button v-if="scope.row.status==1">新客户</el-button>
         <el-button v-if="scope.row.status==2">已成交客户</el-button>
       </template>
      </el-table-column>
      <el-table-column label="操作">
         <template slot-scope="scope">
           <el-button v-hasPermi="['module:filing:update']" type="text" @click="editFn(scope.row)">修改</el-button>
           <el-button type="text"  v-hasPermi="['module:filing:delete']" @click="delFn(scope.row)">删除</el-button>
           <el-button type="text" @click="OpenProjectFn(scope.row)">项目费用</el-button>
         </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formData.pageNum"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="formData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
<!--  新增弹框-->
  <el-dialog title="添加客户" :visible.sync="isShow" width="45%" @close="close" >
    <el-form inline :model="formData" ref="form" :rules="rules" label-width="120px">
      <el-form-item label="客户名称" prop="customerName"><el-input v-model="formData.customerName" placeholder="请输入客户名称"></el-input></el-form-item>
      <el-form-item label="客户电话" prop="customerTelephone"><el-input  v-model="formData.customerTelephone" placeholder="请输入客户电话"></el-input></el-form-item>
      <el-form-item label="项目名称" prop="projectName"><el-input v-model="formData.projectName" placeholder="请输入项目名称"></el-input></el-form-item>
      <el-form-item label="项目地址" prop="projectAddress"><el-input v-model="formData.projectAddress" placeholder="请输入项目地址"></el-input></el-form-item>
      <el-form-item label="公司名称" prop="corporateName"><el-input v-model="formData.corporateName" placeholder="请输入公司名称"></el-input></el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-select v-model="formData.productName" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.productName"
          :value="item.productName">
        </el-option>
      </el-select>
<!--        <div>-->
<!--          <el-form label-width="120px">-->
<!--            <el-button type="primary" size="mini" @click="openProduct" style="margin-bottom: 10px">选择产品</el-button>-->
<!--            <div style="margin-top: 10px">-->
<!--              <el-form-item :prop="'model.1'"  label-width="0">-->
<!--                <div style="display:flex;">-->
<!--                  <label class="whiteBankCard"-->
<!--                         style="width: 130px;margin-right: 10px;text-align: center">整机品名</label>-->
<!--                  <label class="whiteBankCard"-->
<!--                         style="width: 130px;margin-right: 10px;text-align: center">型号</label>-->
<!--                  <label class="whiteBankCard"-->
<!--                         style="width: 130px;margin-right: 10px;text-align: center">数量</label>-->

<!--                  <label class="whiteBankCard"-->
<!--                         style="width: 130px;margin-right: 10px;text-align: center">日租金</label>-->

<!--                  <label class="whiteBankCard"-->
<!--                         style="width: 100px;margin-right: 10px;text-align: center">操作</label>-->

<!--                </div>-->
<!--                <div style="display:flex;" v-for="(item,index) in  productList"   :key="index">-->
<!--                  <div :prop="'product.' + index">-->
<!--                    <el-input class="whiteBankCard" readonly  v-model="item.productName"   placeholder="整机品名"-->
<!--                              style="width: 130px;margin-right: 10px"></el-input>-->
<!--                    <el-input class="whiteBankCard" readonly v-model="item.model" placeholder="型号"-->
<!--                              style="width: 130px;margin-right: 10px"/>-->
<!--                    <el-input class="whiteBankCard" v-model="item.quantity"  placeholder="数量"-->
<!--                              style="width: 130px;margin-right: 10px"/>-->

<!--                    <el-input class="whiteBankCard" v-model="item.dailyRent"   placeholder="日租金（元／台／日）"-->
<!--                              style="width: 130px;margin-right: 10px"/>-->

<!--                    <el-button type="danger" size="mini"  style="height: 30px; margin-left:20px" @click="removeProduct(index)" >-->
<!--                      删除-->
<!--                    </el-button>-->
<!--                    </div>-->
<!--                  </div>-->
<!--              </el-form-item>-->
<!--            </div>-->
<!--          </el-form>-->
<!--        </div>-->
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
  </el-dialog>
<!-- 项目支出明细弹框-->
  <el-dialog title="项目费用" :visible.sync="OneShow" width="40%"  >
        <el-button size="mini" type="success" @click="openHand">添加</el-button>
        <div style="margin-top: 10px; background-color: #f1f3f4">
          <el-table :data="moneyList">
            <el-table-column align="center" width="80" type="index" label="序号"></el-table-column>
            <el-table-column align="center" width="180" property="projectName" label="费用名称"></el-table-column>
            <el-table-column align="center" width="150" property="projectCost" label="金额"></el-table-column>
            <el-table-column align="center" width="100" label="操作">
              <template slot-scope="scope">
                <el-button type="text"  @click="editHand(scope.row)"> 修改</el-button>
                <el-button type="text"  @click="delHand(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="OneShow = false">取 消</el-button>

      </span>
  </el-dialog>
  <!--    添加项目开发费用明细-->
  <el-dialog title="添加" :visible.sync="moneyShow" ref="moneyForm" width="30%" @close="closeFn">
    <el-form :model="moneyForm" label-width="100px">
<!--      <el-form-item label="订单ID" prop="orderId"><el-input v-model="moneyForm.orderId"></el-input></el-form-item>-->
      <el-form-item label="费用名称" prop="projectName"><el-input v-model="moneyForm.projectName"  placeholder="请填写费用名称"></el-input></el-form-item>
      <el-form-item label="金额" prop="projectCost"><el-input v-model="moneyForm.projectCost" placeholder="请填写金额"></el-input></el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="moneyShow=false">取 消</el-button>
        <el-button type="primary" @click="handOk">确 定</el-button>
      </span>
  </el-dialog>
  <import-product ref="importProduct" @showProduct="showProduct"></import-product>
</div>
</template>
<script>
import {getReportedListApi,getReportedInfoApi,addReportedApi,editReportedInfoApi,delReportedInfoApi,addProjectExpendApi,editProjectExpendApi,delProjectExpendApi,getProjectExpendApiInfoApi,getProjectExpendListApi} from '@/api/module/reported'
import {listProduct} from '@/api/module/product'
import importProduct from "@/views/dialog/product";
export default {
  name:"Reported",
  components:{importProduct},
  data(){
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入电话号码'))
      }
      if (value.length !== 11) {
        callback(new Error('请输入正确电话号码'))
      }
      if (value.length !== 11) {
        callback(new Error('请输入正确电话号码'))
      }
      // 验证电话号码手机号码，包含至今所有号段? ?
      var ab = /^[1][3|4|5|6|7|8|9][0-9]{9}$/
      if (ab.test(value) === false) {
        callback(new Error('请输入正确电话号码'))
      }
      callback()
    }
    return{
      formData:{
        pageSize:10,
        pageNum:1,
        customerName:null,
        customerTelephone:null,
        projectName:null,
        projectAddress:null,
        corporateName:null,
        salesmanId:null,
        salesmanName:null,
        status:null,
        productName:null,

      },
      productList:[],
      //费用添加弹框是否打开

      moneyShow:false,
      moneyForm:{
        orderId:null,
        projectName:null,
        projectCost:null,

      },
      moneyList:[],
      OneShow:false,//打开项目费用弹框
      list:[],
      total:0,
      isShow:false,//是否展示
      rules:{
        customerName:[{required:true,message:'请输入客户名称',trigger:'blur'}],
        customerTelephone:[{required:true,message:'请输入客户电话',trigger:'blur'},{ validator: validatePhone, trigger: 'blur' }],
        projectName:[{required:true,message:'请输入项目名称',trigger:'blur'}],
        projectAddress:[{required:true,message:'请输入项目地址',trigger:'blur'}],
        corporateName:[{required:true,message:'请输入公司名称',trigger:'blur'}],
        salesmanName:[{required:true,message:'请输入业务员名称',trigger:'blur'}],
        productName:[{required:true,message:'请输入产品名称',trigger:'blur'}],
      },
      options:[]
    }

  },
  created() {
    this.initData()

  },
  methods:{
   // 数据列表
   async initData(){
     let res=await getReportedListApi(this.formData)
     console.log(res)
     this.list=res.rows
     this.total=res.total
   },


    //分页
    handleSizeChange(val) {
      this.formData.pageSize=val
      this.initData()
    },
    handleCurrentChange(val) {
      this.formData.pageNum=val
      this.initData()
    },
    Search(){
     this.initData()
    },
    Reset(){
     this.formData={}
     this.initData()
    },
//  打开项目支出
   async OpenProjectFn(val){
     this.OneShow=true
     this.moneyForm.projectName=val.projectName
     let res1= await getProjectExpendListApi(this.moneyForm)
     console.log(res1)
     this.moneyList=res1.rows

    },
//项目开发费用明细
    // 弹框打开
    openHand(){
      this.moneyShow=true
      //选择好客户后，订单信息首次创建，数据从 报备管理里面获取
    },
   async editHand(val){
      this.moneyShow=true
      let res=await getProjectExpendApiInfoApi(val.id)
     this.moneyForm=res.data
    },
    /** 打开产品弹窗 */
    openProduct() {
      this.$refs.importProduct.show();
      console.log( this.$refs.importProduct.show())
    },
    showProduct(data){
      this.productList.push(...data);
      console.log(this.productList)
    },
    removeProduct(index) {
      this.productList.splice(index, 1)
    },
    async handOk(){
       try{
         // await this.$refs.moneyForm.validate()
        if(this.moneyForm.id){
          await editProjectExpendApi(this.moneyForm)
        }else{
          await addProjectExpendApi(this.moneyForm)
        }
        this.$message.success('操作成功')
         this.moneyShow=false
         let res=await getProjectExpendListApi({projectName:this.moneyForm.projectName})
         this.moneyList=res.rows
       }catch (error){
         console.log(error)
       }

    },
    //删除
    async delHand(val){
      await this.$confirm('是否删除')
      await  delProjectExpendApi(val.id)
      this.$message.success('删除成功')
      let res=await getProjectExpendListApi({projectName:val.projectName})
      this.moneyList=res.rows
    },
    //弹框关闭
    async closeFn(){
       this.moneyForm.projectCost=null
      this.moneyForm.orderId=null

    },
  //  添加按钮
   async openFn(){
     this.isShow=true
     let res=await listProduct()
     this.options=res.rows
    },
  // 修改按钮
    async editFn(val){
     this.isShow=true
      let res1=await listProduct()
      this.options=res1.rows
       let res=await getReportedInfoApi(val.id)
        this.formData=res.data
    },
  //事件处理
  async  btnOk(){
     try {
       await this.$refs.form.validate()
       if(this.formData.id){
         //  修改
         await editReportedInfoApi(this.formData)
       }else {
         //  添加
         await addReportedApi(this.formData)
       }
       this.$message.success('操作成功')
       this.isShow=false
     }catch(error){

       console.log(error)
     }


    },
  //删除操作
    async delFn(val){
      await  this.$confirm('是否删除该客户信息')
      await delReportedInfoApi(val.id)
      this.$message.success('删除成功')
      await this.initData()
    },
  // 弹框关闭事件
    close(){
     this.formData={
       customerName:null,
       customerTelephone:null,
       projectName:null,
       projectAddress:null,
       corporateName:null,
       salesmanId:null,
       salesmanName:null,
       status:null,
       productName:null
     }
      this.initData()
    },
  }
}
</script>
